<template>
  <view class="container" id="index">
    <view class="header">
      <!-- <view class="header-title"></view> -->
      <Prompt ref="myprompt"></Prompt>
	  <view class="btn red" @click="changeStyle">
		  {{ uiStyle == "elder" ? "普通版" : "长辈版" }}
		</view>
    </view>
    <view class="content-body">
      <view class="body-municipal">
        <view class="body-municipal-teacher2 shadow">
          <view class="body-municipal-teacher-header">
            <view class="body-municipal-teacher-header-left">
              本期名师答疑
            </view>
            <!-- 下面按钮是开始提问 -->
            <!-- <view class="body-municipal-teacher-header-right">
							<view class="body-municipal-teacher-header-right-button" @click="aqcclick2()"></view>
						</view> -->
          </view>
          <view
            v-if="liveList.length"
            class="body-municipal-teacher-body"
            id="studioscroll"
          >
            <swiper
              class="swiper"
              circular
              :indicator-dots="swiper.indicatorDots"
              :autoplay="swiper.autoplay"
              :interval="swiper.interval"
              :duration="swiper.duration"
            >
              <swiper-item
                v-for="(item, i) in liveList"
                :key="i"
                @click="handleLiveJump(item)"
              >
                <image class="image" :src="handleImageUrl(item.poster)" />
              </swiper-item>
            </swiper>
          </view>
        </view>
        <view class="body-municipal-top">
          <view
            class="body-municipal-psychological"
            @click="psychological()"
          ></view>
          <view class="body-municipal-shared" @click="gxyk()"></view>
        </view>
      </view>
      <view class="body-title">
        <view class="body-title-text">名家讲堂</view>
        <view></view>
        <view class=""></view>
      </view>
      <view class="body-lecture">
        <view class="body-lecture-piece shadow">
          <video
            id="myVideo"
            class="body-lecture-piece-video"
            :src="vurl"
            :controls="false"
            @click="viedopause()"
          ></video>

          <view class="body-lecture-piece-cover">
            <view class="body-lecture-piece-title">
              <view class="body-lecture-piece-icon"></view>
              <view class="body-lecture-piece-text textover">{{
                vlist.title
              }}</view>
            </view>
            <view class="body-lecture-piece-introduction textover">{{
              vlist.newsAbstract
            }}</view>
          </view>
          <view
            class="body-lecture-piece-img"
            :style="`background-image: url(${vlist.hPic});`"
            v-if="!isplay"
            @click="videoplay()">
          </view>
          <!-- <image
            class="body-lecture-piece-img"
            :src="vlist.hPic"
            v-if="!isplay"
            @click="videoplay()"
          /> -->
          <view
            class="uni-video-cover-play-button buttonlocation"
            v-if="!isplay"
            @click="videoplay()"
          ></view>
        </view>
        <view class="body-lecture-viewmore shadow" @click="viewmore()">
          <view class=""></view>
          <view class="body-lecture-play"> </view>
          <view class="body-lecture-playtext"> 查看更多 </view>
          <view class=""></view>
        </view>
      </view>
      <!-- <view class="body-title">
        <text class="body-title-text">区县问道</text>
        <view></view>
        <view
          class="body-title-moret"
          @click="morecounty()"
          v-if="morecountyflag"
          >展开</view
        >
        <view class="body-title-moret" @click="morecounty()" v-else>收起</view>
        <view
          class="body-title-more"
          :class="{ spin: !morecountyflag }"
          @click="morecounty()"
        ></view>
      </view>
      <view class="body-county" v-if="morecountyflag">
        <view
          class="body-count-piece"
          v-for="(item, index) in countyData"
          v-if="index < 4"
          :key="index"
          @click="aqcclick(item)"
        >
          {{ item.areaName }}问道名师
        </view>
      </view>
      <view class="body-county" v-else>
        <view
          class="body-count-piece"
          v-for="(item, index) in countyData"
          :key="index"
          @click="aqcclick(item)"
        >
          {{ item.areaName }}问道名师
        </view>
      </view> -->
      <!-- <view class=""> </view> -->
    </view>
    <!-- 弹出 提问收到答复 -->
    <uni-popup ref="popup" type="center">
      <view class="popup">
        <view class="popup-close" @click="closepopup()"></view>
        <view class="popup-title">{{ popup.title }}</view>
        <view class="popup-text">{{ popup.text }}</view>
        <view class="popup-button" @click="popupjump()">{{
          popup.button
        }}</view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import {
  refreshLog,
  getLiveList,
  getListOperational,
  getUnreadInformation,
  getUnreadTask,
  getAreaListOrder,
  getdictByRemark,
  gethalllist,
  gethalldetail,
  getOnlineSubjectAndPeriod,
  getParentsInfo
} from "@/api/index";
import { getDicts } from "@/api/system/dict/data";
import { setOrganizationId } from "@/utils/auth2";
import { getinfo } from "@/utils/auth5";
import { setsubject } from "@/utils/auth6";
import { setperiod } from "@/utils/auth7";
import { setgrade } from "@/utils/auth8";
import { setStudio } from "@/utils/auth9";
import { handleImageUrl, handleAuthVideoUrl } from "@/utils/common";
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      swiper: {
        indicatorDots: true,
        autoplay: true,
        interval: 5000,
        duration: 500,
      },
      topImg: "./static/icon/temp.jpg",
      liveList: [],
      countyData: [],
      scrollTimer: null,
      scrollflage: "",
      popup: {
        title: "",
        text: "",
        button: "",
        url: "",
      },
      morecountyflag: true,
      studioflag: true,
      isteacher: false,
      online: false,
      vlist: {},
      video: [],
      vurl: "",
      list: [],
      periodlist: [],
      isplay: false,
      isstop: false,
      videoContext: "",
      isFirstLoad: true
    };
  },
  computed: {
		...mapGetters(["uiStyle"]),
	},
  created() {
    this.Initialize();
    refreshLog("index");
    this.signPoint();
  },
  methods: {
    signPoint(){
      try {
        let getUrlParam=(key)=> {
          const url = window.location.search;
          const reg = new RegExp("(^|&)" + key + "=([^&]*)(&|$)");
          const result = url.substr(1).match(reg);
          return result ? decodeURIComponent(result[2]) : "";
        }
        let access_token = getUrlParam("access_token");
        if(!access_token) return;
        getParentsInfo({token:access_token}).then(res=>{
          console.log('signPoint-res',res);
          let sub = res.data ? JSON.parse(res.data).sub : '';
          console.log('signPoint-JSON.parse(res.data)',JSON.parse(res.data));
          let config = {
            userId: sub,//用户id
            appId:"1687837298985",//应用id
          };
          window.monitorSdk && window.monitorSdk.init(config);
       
        })
      } catch (error) {
        console.log('signPoint-error',error)
      }
      
    },
	changeStyle() {
		  // this.$store.state.edition = !this.$store.state.edition;
		  let curUiStyle = this.uiStyle == "normal" ? "elder" : "normal";
		  this.$store.commit("SET_UISTYLE", curUiStyle);
		  console.log();
	},
    handleShow() {
      if (!this.isFirstLoad) {
        this.getLiveList();
        if (this.$store.state.user.name) {
          this.unreadInformation();
        }
      }
    },
    handleImageUrl,
    Initialize() {
      this.getLiveList();

      this.getdict();
      this.arealist();
      this.halllist();
      this.OnlineSubjectAndPeriod();
      if (this.$store.state.user.name) {
        if (getinfo().identity == 2) {
          this.$modal.showToast("教师端暂未开放");
          this.$store.dispatch("LogOut").then(() => {
            this.clearall();
          });
        }
        this.unreadInformation();
      }
      this.$nextTick(() => {
        this.isFirstLoad = false
      })
    },
    videoplay() {
      this.isplay = true;
      this.videoContext = uni.createVideoContext("myVideo", this);
      this.videoContext.play();
    },
    viedopause() {
      if (this.isstop) {
        this.videoplay();
      } else {
        this.videoContext = uni.createVideoContext("myVideo", this);
        this.videoContext.pause();
      }
      this.isstop = !this.isstop;
    },
    clearall() {
      this.$store.state.user.name = "";
      this.$store.state.user.personal = {
        avatar: "",
        nickName: "",
        consultsCount: 0,
        evaluatesCount: 0,
        questionsCount: 0,
      };
    },
    halllist() {
      let data = {
        functionName: "getCurrentNodeNews",
        nodeId: "430",
        page: 1,
        pageSize: 1,
      };
      gethalllist(data).then((res) => {
        let arr = JSON.parse(res.data.data);
        this.vlist = arr[0];
        this.halldetail(this.vlist.selfReqUrl);
      });
    },
    halldetail(url) {
      let list = url.split("=");
      let data = {
        functionName: list[1].split("&")[0],
        newsId: list[2].split("&")[0],
        nodeId: list[3],
      };
      gethalldetail(data).then((res) => {
        this.video = JSON.parse(res.data.data);
        console.log("this.video", this.video);
        this.video.tags = this.video.tags.split(",");
        this.list = [];
        for (let i in this.video.vodList[0].fileList) {
          if (i == 0) {
            this.list.push(
              handleAuthVideoUrl(this.video.vodList[0].fileList[i].playUrl)
            );
          }
        }
        this.vurl = this.list[0];
        console.log("this.list", this.list);
      });
    },
    OnlineSubjectAndPeriod() {
      this.online = false;
      // {"isBelongCity":0,"organizationId":1}
      let data = {
        isBelongCity: 1,
        organizationId: 0,
      };
      getOnlineSubjectAndPeriod(data).then((res) => {
        if (res.length > 0) {
          this.online = true;
        }
      });
    },
    arealist() {
      let data = "?pageSize=1000";
      this.countyData = [];
      // getAreaListOrder
      getAreaListOrder(data).then((res) => {
        let data = res.rows;
        for (let i in data) {
          if (data[i].areaCode != "330199") {
            this.countyData.push(data[i]);
          }
        }
      });
    },
    getdict() {
      getDicts("base_period_type").then((res) => {
        let data = res.data;
        let list = [];
        this.periodlist = [];
        for (let i in data) {
          list.push({
            value: data[i].dictCode,
            text: data[i].dictLabel,
            baseGrade: [],
            baseSubject: [],
          });
          let remark = {
            dictValue: data[i].dictValue,
          };
          getdictByRemark(remark).then((res) => {
            let baseGrade = res.data.baseGrade;
            let baseSubject = res.data.baseSubject;
            for (let j in baseGrade) {
              list[i].baseGrade.push({
                value: baseGrade[j].dictCode,
                text: baseGrade[j].dictLabel,
              });
            }
            for (let j in baseSubject) {
              list[i].baseSubject.push({
                value: baseSubject[j].dictCode,
                text: baseSubject[j].dictLabel,
              });
            }
            setperiod(list);
          });
        }
      });
      getDicts("base_subject").then((res) => {
        console.log("res.data", res.data);
        let list = [];
        let data = res.data;
        for (let i in data) {
          list.push({
            value: data[i].dictCode,
            text: data[i].dictLabel,
          });
        }
        setsubject(list);
      });
      getDicts("base_grade").then((res) => {
        console.log("res.data", res.data);
        let list = [[], [], []];
        let data = res.data;
        for (let i in data) {
          if (data[i].dictLabel.indexOf("年级") != -1) {
            list[0].push({
              value: data[i].dictCode,
              text: data[i].dictLabel,
            });
          } else if (data[i].dictLabel.indexOf("初") != -1) {
            list[1].push({
              value: data[i].dictCode,
              text: data[i].dictLabel,
            });
          } else if (data[i].dictLabel.indexOf("高") != -1) {
            list[2].push({
              value: data[i].dictCode,
              text: data[i].dictLabel,
            });
          }
        }
        setgrade(list);
      });
    },
    unreadInformation() {
      getUnreadInformation().then((res) => {
        // console.log("res",res)
        this.$store.state.user.prompt.tobeGetQuestions = res.tobeGetQuestions;
        this.$store.state.user.prompt.unreadCounselingNum =
          res.unreadCounselingNum;
        this.$store.state.user.prompt.unreadQuestionsNum =
          res.unreadQuestionsNum;
        let num = res.tobeGetQuestions;
        if (num > 0) {
          if (num > 99) {
            num = "99+";
          } else {
            num += "";
          }
        }
        uni.setTabBarBadge({
          //显示数字
          index: 1, //tabbar下标
          text: num, //数字
        });
        let num2 = res.unreadCounselingNum + res.unreadQuestionsNum;
        if (num2 > 0) {
          if (num2 > 99) {
            num2 = "99+";
          } else {
            num2 += "";
          }
        }
        uni.setTabBarBadge({
          //显示数字
          index: 2, //tabbar下标
          text: num2, //数字
        });
      });
      getUnreadTask();
    },
    // 名师答疑直播列表
    getLiveList() {
      getListOperational().then((res) => {
        if (res?.code == 200) {
          this.liveList = res.data;
        }
      });
    },
    aqcclick(item) {
      if (item) {
        setOrganizationId(item.id);
      } else {
        this.$store.state.user.organizationId = null;
      }
      this.$router.push("/pages/aqc/index");
    },
    
    psychological() {
      this.$store.state.user.urlstudio = "/pages/index";
      this.$router.push("/pages/psychological/index");
    },
    // 运营位跳转
    handleLiveJump(item) {
      if (item.isLive) {
        // 直播
        this.$router.push(`/pages/live/index?id=${item.id}`);
      } else {
        item.rosteringFlag == 1
          ? this.psychological()
          : this.studiodetails(item);
      }
    },
    gxyk() {
      // window.location.href = "https://jiaoyu.wasu.com/wasu-share-courses-phone/index.html#/";
      window.location.href = "https://gxyk.mhjyy.cn/wasu-share-courses-phone/index.html";
      
    },
    studiodetails(data) {
      this.$store.state.user.isBelongCity = 1;
      this.$store.state.user.studio.id = data.workroomId;
      this.$store.state.user.studio.studioName = data.studioName;
      this.$store.state.user.studio.introduction = data.introduction;
      this.$store.state.user.urlstudio = "/pages/index";
      this.$router.push(`/pages/aqc/studio?studioId=${data.workroomId}`);
    },
    viewmore() {
      this.$router.push("/pages/video");
    },
    open() {
      // 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
      this.$refs.popup.open("center");
    },
    closepopup() {
      this.$refs.popup.close();
    },
    popupjump() {
      if (this.popup.url) {
        this.$router.push(this.popup.url);
      } else {
        this.$refs.popup.close();
      }
    },
    morecounty() {
      this.morecountyflag = !this.morecountyflag;
      if (!this.morecountyflag) {
        this.move();
      }
    },
    move() {
      setTimeout(() => {
        let scroll = document.getElementById("index");
        let scrollHeight = scroll.scrollHeight;
        let clientHeight = scroll.clientHeight;
        let scrollTop = scroll.scrollTop;
        document.getElementById("index").scrollTop =
          scrollHeight - clientHeight;
      }, 50);
    },
  },
  destroyed() {
    clearInterval(this.scrollTimer);
  },
};
</script>

<style lang="scss" scoped>
	.btn {
		padding: 0 0 2rpx;
		text-align: center;
		color: #fff;
		border-radius: 40rpx;
		@include add_size2(32rpx);
		line-height: 1.8;
		border: none;
		outline: none;
		float: right;
	  }
	  .red {
		@include add_width(148rpx);
		background-color: #da7e01;
	  }
.index {
  background-color: #ffffff;
  width: 100vw;
  height: calc(100vh - 50px - env(safe-area-inset-bottom));
}

.container {
  background-color: #ffffff;
  width: 100vw;
  // height: 94.66vh;
  height: calc(100vh - 50px - env(safe-area-inset-bottom));
  display: grid;
  justify-items: center;
  align-items: center;
  grid-template-rows: auto auto;
  overflow: auto;
}

.header {
  width: 100vw;
  height: 68.25vw;
  /* background: url(../../static/index/top.svg); */
  background: url(../../static/index/top.png);
  background-size: 100% 100%;
  padding:32rpx;
}

.header-title {
  position: relative;
  top: 12vw;
  left: 4vw;
  width: 37vw;
  height: 10vw;
  background: url(../../static/index/wdms.png);
  background-size: 100% 100%;
}

.content-body {
  margin: -12vw 0 0 0;
  width: 100%;
  /* height: calc(100% + 0vw); */
  display: grid;
  justify-items: center;
  align-items: center;
  grid-row-gap: 2vw;
  /* grid-template-columns: 1fr; */
  /* grid-template-rows: 80vw 12vw 50vw 10vw auto; */
  grid-template-rows: auto auto auto;
}

.body-title {
  width: 90%;
  height: 5vh;
  display: grid;
  justify-items: left;
  align-items: center;
  grid-template-columns: auto 1fr auto auto;
  /* grid-template-rows: 1fr; */
  @include add_size2(32rpx);
  font-weight: 600;
}

.body-title-text {
  /* margin: 0 5vw; */
}

.body-title-moret {
  color: #686b73;
  @include add_size(4vw);
  cursor: pointer;
}

.spin {
  transform: rotate(270deg) !important;
}

.body-title-more {
  display: grid;
  justify-items: left;
  align-items: center;
  width: 4vw;
  height: 4vw;
  background: url(../../static/index/more.svg);
  background-size: 100% 100%;
  transform: rotate(90deg);
  cursor: pointer;
}

.body-municipal {
  width: 100vw;
  display: grid;
  justify-items: center;
  align-items: center;
  grid-row-gap: 3vw;
  grid-template-rows: auto auto;
}

.body-municipal-top {
  height: 21vw;
  display: grid;
  justify-items: center;
  align-items: center;
  grid-column-gap: 2vw;
  grid-template-columns: 1fr 1fr;
}

.body-municipal-psychological {
  width: 44vw;
  height: 21vw;
  background: url(../../static/index/psychological.svg);
  background-size: 100% 100%;
  cursor: pointer;
  border-radius: 2.2vw;
  box-shadow: 0px 0px 5vw rgba(21, 223, 168, 0.25);
}

.body-municipal-shared {
  width: 44vw;
  height: 21vw;
  /* border-radius: 3vw; */
  background: url(../../static/index/shared.svg);
  background-size: 100% 100%;
  cursor: pointer;
  border-radius: 2.2vw;
  box-shadow: 0px 0px 5vw rgba(255, 92, 32, 0.25);
}

.body-municipal-teacher2 {
  padding: 0;
  width: 90vw;
  height: auto;
  border-radius: 2.2vw;
  background: #ffffff;
  background-size: 100% 100%;
  display: grid;
  justify-items: center;
  align-items: center;
  grid-template-rows: 16vw auto;
}

.shadow {
  box-shadow: 0px 0px 5vw rgba(0, 0, 0, 0.08);
}

.body-municipal-teacher-header {
  width: 100%;
  height: 100%;
  display: grid;
  justify-items: center;
  align-items: center;
  grid-template-columns: 1fr 1fr;
}

.body-municipal-teacher-header-left {
  margin: 0 0 0 5%;
  width: 90%;
  height: 100%;
  display: grid;
  justify-items: start;
  align-items: center;
  @include add_size2(36rpx);
  font-weight: 600;
  color: #363a44;
}

.body-municipal-teacher-header-right {
  width: 85%;
  height: 100%;
  display: grid;
  justify-items: end;
  align-items: end;
}

.body-municipal-teacher-header-right-button {
	@include big_size(1.1);
  width: 32vw;
  height: 12vw;
  /* background: url(../../static/index/startask.svg); */
  background: url(../../static/index/startask2.png);
  background-size: 100% 100%;
  cursor: pointer;
}

.body-municipal-teacher-body {
  width: 100%;
  height: auto;
}
.swiper {
  width: 100%;
  height: 53.5vw;
}
::v-deep .body-municipal-teacher-body {
  uni-swiper .uni-swiper-dot-active {
    background-color: #1492ff;
  }
  uni-swiper .uni-swiper-dots-horizontal {
    bottom: 5px;
  }
}

.image {
  width: 100%;
  height: 53.5vw;
  margin-bottom: 2vw;
}

.body-lecture {
  width: 90vw;
  height: 36vw;
  display: grid;
  justify-items: center;
  align-items: center;
  grid-column-gap: 2vw;
  grid-template-columns: 64vw auto;
  /* grid-template-rows: 1fr 1fr; */
}

.body-lecture-piece {
  width: 64vw;
  height: 36vw;
  border-radius: 2.2vw;
  background-color: #ffffff;
}

.body-lecture-viewmore {
  width: 24vw;
  height: 36vw;
  display: grid;
  justify-items: center;
  align-items: center;
  grid-template-rows: 1fr auto auto 1fr;
  border-radius: 2.2vw;
  cursor: pointer;
}

.body-lecture-play {
  width: 8.5vw;
  height: 8.5vw;
  background: url(../../static/index/play.svg);
  background-size: 100% 100%;
}

.body-lecture-playtext {
  @include add_size(4vw);
}

.buttonlocation {
  position: relative;
  top: -77vw;
  margin: 0vw 26.7vw 0vw 26.7vw;
  z-index: 9999;
}

.body-lecture-piece-img {
  position: relative;
  top: -49vw;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 2.2vw 2.2vw;
  object-fit: fill;
  z-index: 9998;
  background-size: 100% 100%;
}

.body-lecture-piece-video {
  width: 100%;
  height: 100%;
  object-fit: fill;
  border-radius: 2.2vw;
}

.body-lecture-piece-cover {
  width: 64vw;
  height: 12vw;
  position: relative;
  top: -12.5vw;
  display: grid;
  justify-items: center;
  align-items: center;
  grid-template-rows: 40% 60%;
  border-radius: 0vw 0vw 2.2vw 2.2vw;
  background: #ffffffa0;
  z-index: 9999;
}

.body-lecture-piece-title {
  width: auto;
  height: 100%;
  display: grid;
  justify-items: center;
  align-items: center;
  grid-column-gap: 1vw;
  grid-template-columns: auto auto;
}

.body-lecture-piece-icon {
  width: 4vw;
  height: 4vw;
  background: url(../../static/index/hot.gif);
  background-size: 100% 100%;
}

.body-lecture-piece-text {
  width: 55vw;
  @include add_size2(4vw);
  font-weight: 600;
}

.body-lecture-piece-introduction {
  width: 60vw;
  @include add_size2(3vw);
}

.textover {
  overflow: hidden;
  /* 超出一行文字自动隐藏 */
  text-overflow: ellipsis;
  /*文字隐藏后添加省略号*/
  white-space: nowrap;
  /*强制不换行*/
}

.body-county {
  width: 90vw;
  height: auto;
  display: grid;
  justify-items: center;
  align-items: center;
  grid-column-gap: 2vw;
  grid-row-gap: 2vw;
  grid-template-columns: 1fr 1fr;
  /* grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr; */
}

.body-count-piece {
  width: 100%;
  height: 10vw;
  display: grid;
  justify-items: center;
  align-items: center;
  border-radius: 2.2vw;
  @include add_size(4vw);
  cursor: pointer;
}

.body-count-piece:nth-child(5n + 1) {
  background: #ebf9f4;
}

.body-count-piece:nth-child(5n + 2) {
  background: #efeefd;
}

.body-count-piece:nth-child(5n + 3) {
  background: #e7f4ff;
}

.body-count-piece:nth-child(5n + 4) {
  background: #fef2ef;
}

.body-count-piece:nth-child(5n + 5) {
  background: #fff8e9;
}

.footer {
  padding: auto;
  width: 98%;
  height: 98%;
  display: grid;
  justify-items: center;
  align-items: center;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  /* grid-template-rows: 1fr; */
  border: 1px solid #000000;
}

.footer-button {
  /* width: 100%; */
  height: 100%;
  display: grid;
  justify-items: center;
  align-items: center;
  /* grid-template-columns: 1fr; */
  grid-template-rows: 3fr 2fr;
}

.footer-button-icon {
  width: 100%;
  height: 100%;
  display: grid;
  justify-items: center;
  align-items: center;
}

.footer-button-icon-img {
  margin: 0;
  width: 40px;
  display: block;
  display: table-cell;
  vertical-align: middle;
}

.footer-button-text {
}

.footer-button-number {
  padding: 0 6.5px;
  position: absolute;
  display: grid;
  justify-content: center;
  align-items: center;
  margin: 1px 0 0 30px;
  background-color: red;
  border-radius: 999999px;
  line-height: 20px;
  @include add_size(12px);
  color: #ffffff;
}

.popup {
  width: 60vw;
  height: 40vw;
  background: #ffffff;
  position: absolute;
  margin-left: -30vw;
  margin-top: -20vw;
  border-radius: 2.2vw;

  display: grid;
  justify-content: center;
  align-items: center;
  grid-template-rows: 5vw 5vw 15vw 15vw;
}

.popup-close {
  margin: 2vw 0 0 55vw;
  width: 3vw;
  height: 3vw;
  background: url(../../static/index/close.svg);
  background-size: 100% 100%;
  cursor: pointer;
}

.popup-title {
  display: grid;
  justify-content: center;
  align-items: center;
  font-weight: 600;
  @include add_size(4vw);
}

.popup-text {
  margin: 0 5vw 0 05vw;
  width: 50vw;
  display: grid;
  justify-content: center;
  align-items: center;
  @include add_size(3.4vw);
}

.popup-button {
  margin: 0 5vw 0 5vw;
  width: 50vw;
  height: 8vw;
  border-radius: 4vw;
  display: grid;
  justify-content: center;
  align-items: center;
  color: #ffffff;
  background: #1492ff;
  cursor: pointer;
}

.displaynone {
  display: none;
}
</style>
